<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/swiper.min.js' %}"></script>
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="https://cdn.bootcss.com/reqwest/2.0.5/reqwest.min.js"></script>
</head>
<body>

    <div class="banner" id="gongzuoshi">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
                <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
                <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
                <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
            </div>
            <div class="con">
               <img src="{% static 'img/logo.png' %}" alt="">
                源工作室
            </div>
        </div>
        <div class="sldBar">

            <div class="sl_lt">
                <span class="button-next"><i class="glyphicon glyphicon-menu-left"></i></span>
                <span class="button-prev"><i class="glyphicon glyphicon-menu-right"></i></span>
            </div>
            <div class="sl_rt">
                <a href="#we"><span><i class="glyphicon glyphicon-menu-down"></i></span></a>
            </div>
            <div class="sl_list">
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <nav class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:;" name="we"><img alt="源工作室" src="{% static 'img/logo.png' %}">源工作室</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#gongzuoshi">工作室</a></li>
                    <li><a href="#gongzuo">我们工作</a></li>
                    <li><a href="#lianxi">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
<div class="content" id="gongzuo">
    <div class="container">
        <div class="title">
            Our Projects
            <br>
            <span>量身订制，要“快”，更要“稳”</span>
        </div>
        <ul class="nav nav-pills nav-stacked navbar-left clearfix" id="list">
            <li class="n_tit"><a href="javascript:;">工 作 日 志</a></li>
            {% for class in project_class %}
            {% if '所有类目' in class.name %}
            <li role="presentation" class="active"><a href="javascript:;">{{ class.name }}</a></li>
            {% else %}
            <li role="presentation"><a href="javascript:;">{{ class.name }}</a></li>
            {% endif %}
            {% endfor %}
            <!--<li role="presentation" class="active"><a href="javascript:;">所有类目</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">基础模板</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">私人定制</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">后台数据</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">API爬虫</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">APP开发</a></li>-->
        </ul>
        <ul class="list-group navbar-right clearfix" id="data_lst">
            {% for project in projects %}
            <!--{{ project.title }}-->
            <li class="list-group-item" data-val="{{ project.belong_class }}"><img src="/media/{{ project.pic }}"><a href="javascript:;"><i>{{ project.title }}</i></a></li>

            <!--<img src="/media/{{ project.pic }}" alt="">-->
            <!--{{ project.belong_class }}-->
            {% endfor %}
            <li class="list-group-item" data-val="1"><img src="{% static 'img/list.png' %}"><a href="javascript:;"><i>我是基础模板</i></a></li>
            <li class="list-group-item" data-val="2"><img src="{% static 'img/list2.png' %}"><a href="javascript:;"><i>我是私人定制</i></a></li>
            <li class="list-group-item" data-val="3"><img src="{% static 'img/list3.png' %}"><a href="javascript:;"><i>我是后台数据</i></a></li>
            <li class="list-group-item" data-val="4"><img src="{% static 'img/list.png' %}"><a href="javascript:;"><i>我是API爬虫</i></a></li>
            <li class="list-group-item" data-val="5"><img src="{% static 'img/list2.png' %}"><a href="javascript:;"><i>我是APP开发</i></a></li>
            <li class="list-group-item" data-val="1"><img src="{% static 'img/list3.png' %}"><a href="javascript:;"><i>我是基础模板</i></a></li>
            <li class="list-group-item" data-val="2"><img src="{% static 'img/list.png' %}"><a href="javascript:;"><i>我是私人定制</i></a></li>
            <li class="list-group-item" data-val="3"><img src="{% static 'img/list2.png' %}"><a href="javascript:;"><i>我是后台数据</i></a></li>
            <li class="list-group-item" data-val="4"><img src="{% static 'img/list3.png' %}"><a href="javascript:;"><i>我是API爬虫</i></a></li>
            <li class="list-group-item" data-val="5"><img src="{% static 'img/list.png' %}"><a href="javascript:;"><i>我是APP开发</i></a></li>
            <li class="list-group-item" data-val="1"><img src="{% static 'img/list2.png' %}"><a href="javascript:;"><i>我是基础模板</i></a></li>
            <li class="list-group-item" data-val="2"><img src="{% static 'img/list3.png' %}"><a href="javascript:;"><i>我是私人定制</i></a></li>
            <li class="list-group-item" data-val="3"><img src="{% static 'img/list.png' %}"><a href="javascript:;"><i>我是后台数据</i></a></li>
        </ul>
    </div>
    <div class="container">
        <nav aria-label="Page navigation " id="page_link">
            <ul class="pagination">
                <li v-for="item in page_ls"><a href="javascript:;" v-text="item"></a></li>
            </ul>
        </nav>
    </div>
</div>
<div class="call" id="lianxi">

    <div class="container">
        <div class="title">
            Connection Us
            <br>
            <span>已有“{{ user_data.times }}”人走在了您的前方，还不尽快留下您的足记</span>
            <!--<span>已有“{{ user_data|length }}”人走在了您的前方，还不尽快留下您的足记</span>-->
        </div>
        <div class="from">
            <div class="form-group">
                <input type="text" class="fml" id="userName" name="name" placeholder="名      字">
                <input type="tel" class="fml" id="phone" name="tel" placeholder="手 机 号">
                <textarea id="textArea" class="fml" rows="3" name="text" placeholder="说点什么吧"></textarea>
                <button id="index_get" type="submit" class="btn btn-default">预 约</button>
            </div>
        </div>
        <ul class="nav nav-pills nav-stacked navbar-left">
            <li role="presentation">联 系 我 们</li>
            <li role="presentation">邮 箱：{{ connect_us.e_mail }}</li>
            <li role="presentation">电 话：{{ connect_us.tel }}</li>
            <li role="presentation">地 址：{{ connect_us.address }}</li>
        </ul>
    </div>
</div>
</body>
<script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            prevEl: '.button-next',
            nextEl: '.button-prev',
        },
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        effect:'fade',
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });
    $(function () {
       $("#list li:not(.n_tit)").click(function () {
           $(this).addClass("active").siblings().removeClass("active");

           var index = $(this).index()-1;
           if(index == 0){
               $("#data_lst li").fadeIn();
           }else{
               $("#data_lst li").each(function () {
                   if($(this).attr("data-val") == index){
                       $(this).delay(600).fadeIn();
                   }else{
                       $(this).fadeOut();
                   }
               });
           }
       });
        var pjt_list = new Vue({
            el:"#gongzuo",
            data:{
                page:'',
                page_ls:[],
                img_ls:[]
            },
            methods:{
                getList:function(){
                    var self = this;
                    reqwest({
                        url: '{% url 'web_get_pic' 2 1 %}'
                        , method: 'get'
                        , data: {}
                        , success: function (res) {
                            console.log(res)
                            $(res).each(function (index) {
                                if(index == 0){
                                    self.page = $(this)[0].num_pages;
                                }else{
                                    self.img_ls.push($(this)[0]);
                                }
                            });
                            for(var i=1;i<=self.page;i++){
                                self.page_ls.push(i);
                            }
                        }
                        , error: function (resp) {
                            alert("出现某种异常，请稍后重试。");
                        }
                    });
                }
            },
            beforeMount:function(){
                this.getList();
            }
        });
    });

    $("#index_get").click(function(){
        reqwest({
            url: '{% url "web_index_" %}'
          , method: 'get'
          , data: { name: $("#userName").val(), tel: $("#phone").val(), text:$("#textArea").val()}
          , success: function (resp) {
                alert(resp);
                $('#result').html(resp);
            }
          , error: function (resp) {
                alert("出现某种异常，请稍后重试。");
          }
        })
    });

</script>
